<template>
  <span>
    <el-dialog :visible="dispatchVisible"
               :title="`调度`"
               :width="`1020px`"
               :before-close="close"
               append-to-body>
      <div class="flex-start">
        <span style="font-size:16px;">调度对象：</span>
        <div class="drag">
          <div v-for="({label, checked, activeIcon, icon},index) in fieldList"
               :key="label + index"
               :class="checked ? 'active' : ''"
               class="drag__item"
               draggable
               @click="handleClick(index)">
            <icon-svg :icon-name="checked ? activeIcon : icon" />
            <span :class="checked ? 'activeLabel ml5' : 'ml5'">{{label}}</span>
            <span v-show="checked"
                  class="icon-iconclass">
              <img src="@/static/images/xuanzhong.png">
            </span>
          </div>
        </div>
      </div>
      <el-divider />
      <div v-if="activeName === 'first'">
        <div class="titleSty">承运方选择</div>
        <CarrierSelectCard :disabled="disabled"
                           :filter="{
                          type: [0, 1],
                          status: 1
                         }"
                           @cancel="close"
                           @submit="handleSubmit"
                           v-on="$listeners" />
      </div>
      <div v-else>
        <SelfSupport ref="selfSupport"
                     :url="url"
                     detail-flag
                     v-on="$listeners"
                     @close="close"
                     @submit="handleSubmit" />
      </div>
    </el-dialog>
    <driver-dispatch-dialog v-if="driverDispatchVisible"
                            :driver-dispatch-visible.sync="driverDispatchVisible"
                            :record="formValue"
                            :dispatch-type="dispatchType"
                            @handleDispatch="handleDispatch" />
  </span>
</template>
<script>
import CarrierSelectCard from "@basic/CarrierSelectCard.vue";
import SelfSupport from "@/components/basic/SelfSupport.vue";
import DriverDispatchDialog from "@/components/table/dialog/DriverDispatchDialog.vue";
import { user } from "@/api/index";

export default {
  name: "DispatchDialog",
  components: {
    CarrierSelectCard,
    SelfSupport,
    DriverDispatchDialog
  },
  props: {
    dispatchVisible: {
      type: Boolean,
    },
    dispatchType: {
      type: String,
      default: 'waybill'
    },
    form: Object
  },
  data () {
    return {
      disabled: false,
      activeName: 'first',
      driverDispatchVisible: false,
      action: null,
      permission: false,
      fieldList: [
        { label: "承运方", checked: true, icon: "chengyunfang", activeIcon: "chengyunfang1" },
        { label: "自营", checked: false, icon: "ziying", activeIcon: "ziying1" },
      ]
    }
  },
  computed: {
    formValue () {
      if (this.dispatchType === 'waybill') {
        return {
          ...this.form,
          ...this.form.transportRequirement,
          ...this.form.waybillCache,
          fromProvince: this.form.fromAddress.province,
          fromCity: this.form.fromAddress.city,
          fromDistrict: this.form.fromAddress.district,
          fromAddress: this.form.fromAddress.address,
          toProvince: this.form.toAddress.province,
          toCity: this.form.toAddress.city,
          toDistrict: this.form.toAddress.district,
          toAddress: this.form.toAddress.address,
        }
      } else {

        const fromAddress = [];
        const toAddress = [];
        this.form.tableData.forEach((res) => {
          fromAddress.push(res.fromAddress);
          toAddress.push(res.toAddress);
        });
        const pick = [...new Set(fromAddress)];
        const deliver = [...new Set(fromAddress)];
        return {
          ...this.form,
          childWayBillNum: this.form.tableData.length,
          pickCount: pick.length,
          deliverCount: deliver.length
        }
      }
    }
  },
  created () {
    this.getPermission()
  },
  methods: {
    async getPermission () {
      let { code, data } = await user.getPermission();
      if (code === 0) {
        this.permission = data.canQuote;
      }
    },
    handleClick (index) {
      if (index) {
        this.activeName = 'second';
        this.fieldList[index - 1].checked = false;
      } else {
        this.activeName = 'first';
        this.fieldList[index + 1].checked = false;
      }
      this.fieldList[index].checked = true;
    },
    handleDispatch (fee) {
      let params = {
        carrierId: this.action.carrierId,
        carrierName: this.action.name,
        carrierType: this.action.type,
        tenantId: this.action.tenantId,
      }
      this.$emit("selectCarrier", fee ? { ...params, fee } : params);
    },
    // 确定
    handleSubmit (action) {
      if (this.activeName === 'first') {
        if (!action?.hasTransportAuthority) {
          return false;
        }
        if (!action?.carrierId) {
          return this.$message.warning(`请选择承运方!`);
        }
        this.action = action;
        if (this.permission && action?.extraType && !this.form.billDayStatus) {
          this.driverDispatchVisible = true;
        } else {
          this.handleDispatch();
          this.$refs.selfSupport?.cleanSelect();
          this.close();
        }
      }
      if (this.activeName === 'second') {
        this.$emit("selectCarrier", {
          driverId: action.driverId,
          vehicleId: action.vehicleId
        });
        this.$refs.selfSupport?.cleanSelect();
        this.close();
      }
    },
    // 取消
    close () {
      this.handleClick(0);
      this.$emit("update:dispatchVisible", false);
    }
  },
};
</script>
<style lang="scss" scoped>
.label-item {
  font-size: 16px;
  margin-bottom: 20px;
  color: #000;
}
.tipsSty {
  height: 30px;
  .tipsFont {
    color: #f56c6c;
    font-size: 12px;
    margin-left: 25px;
  }
}
.footer {
  float: right;
  padding-top: 12px;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 20px 0;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.titleSty {
  width: 200px;
  height: 14px;
  border-left: 2px solid var(--prev-color-primary);
  padding-left: 6px;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
}
.drag {
  display: flex;
  flex-wrap: wrap;
  &__item {
    margin: 5px;
    line-height: 35px;
    text-align: center;
    color: var(--prev-color-text-ashes);
    border: 1px solid var(--prev-border-color-grey);
    opacity: 1;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    font-weight: 400 !important;
    padding: 0 20px;
  }
  .icon-iconclass {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    bottom: 0;
    img {
      width: 22px;
      height: 22px;
    }
  }
}
.active {
  transition: transform 0.3s;
  border: 1px solid var(--prev-color-primary);
}
.activeLabel {
  color: var(--prev-color-primary);
}
.ml5 {
  margin-left: 5px;
}
</style>